<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    /*清除默认样式*/
    * {
        margin: 0;
        padding: 0;
    }

    /*设置父级的布局方式*/
    div {
        display: flex;
        height: 50px;
        justify-content: center;

        background-color: green;
    }

    /*自己不设置高度，让flex弹性布局自动撑到盒子最大宽度*/
    textarea {
        width: 1000px;
        padding: 0;
        resize: none; /* 禁用缩放 */
    }

    button {
        width: 60px;
        background-color: yellow;
    }
</style>
<body>

<div class="box">
    <textarea placeholder="善语结山缘，恶言伤人心">
    </textarea>
    <button>点击评论</button>
</div>

<script>
    const textAreaElement = document.querySelector('textarea');
    // 鼠标单击事件
    const buttonElement = document.querySelector('button');
    buttonElement.addEventListener('click', function () {
        alert(textAreaElement.value.length)
    })

</script>
</body>
</html>
